<template>
  <div v-if="showCheckbox && displayTable" class="table-selection">
    <tiny-checkbox :modelValue="props.checked" @change="handleCheck"></tiny-checkbox>
  </div>
  <div class="block-item-img">
    <img
      v-if="item.screenshot"
      class="item-image"
      :src="item.screenshot || defaultImg"
      draggable="false"
      @error="$event.target.src = defaultImg"
    />
    <svg-icon v-else class="item-image item-default-img" name="block-default"></svg-icon>
    <div v-if="showCheckbox && !displayTable" class="top-left">
      <tiny-checkbox :modelValue="props.checked" @change="handleCheck"></tiny-checkbox>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Checkbox as TinyCheckbox } from '@opentiny/vue'
import { defineEmits, defineProps } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  checked: {
    type: Boolean,
    default: false
  },
  // 是否显示多选框
  showCheckbox: {
    type: Boolean,
    default: false
  },
  displayTable: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['check'])

const defaultImg =
  ''

const handleCheck = (v: any) => {
  emit('check', v)
}
</script>

<style lang="less" scoped>
.table-selection {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block-item-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  border-radius: 4px;
  background-color: var(--te-component-block-bg-color);

  .top-left {
    display: flex;
    position: absolute;
    top: 4px;
    right: 4px;
  }
}

:deep(.tiny-checkbox__label) {
  padding: 0;
}

.item-image {
  width: 84px;
  height: 48px;
  overflow: hidden;
  object-fit: cover;
}
.item-default-img {
  width: 84px;
  height: 50px;
  color: var(--te-component-common-bg-color);
}

.block-item-small-list .item-image {
  width: 30px;
  height: 30px;
  min-width: 30px;
}
</style>
